<template>
    <div id="edit">
      <div class="edit">
        <el-form :rules="rules" :model="form">
          <el-form-item prop="secTitle">
            <el-input v-model="form.secTitle" placeholder="请输入标题" />
          </el-form-item>
          <!-- 介绍 -->
          <el-form-item prop="secCon">
            <el-input
              v-model="form.secCon"
              type="textarea"
              placeholder="请输入为什么"
              :rows="3"
              resize="none"
            />
          </el-form-item>
          <el-form-item>
            <el-switch
              v-model="form.isIp"
              style="--el-switch-on-color: #ff4949; --el-switch-off-color: none"
            />
            <span>是否为重点</span>
          </el-form-item>
        </el-form>
  
        <div class="btn">
          <el-button type="primary">修改秘密</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive, ref } from "vue";
  import type { FormRules } from "element-plus";
  
  const form = reactive({
    secTitle: "把我惹急了",
    secCon: "我就给你们假装科普7G下面所有SOC芯片,全买给性价比公司",
    isIp: false,
  });
  const rules = reactive<FormRules>({
    secTitle: [
      { required: true, message: "请输入名字", trigger: "blur" },
      { max: 50, message: "不要超过50", trigger: "blur" },
    ],
    secCon: [
      { required: true, message: "请输入英文名", trigger: "blur" },
      { max: 50, message: "不要超过50", trigger: "blur" },
    ],
  });
  </script>
  
  <style lang="less" scoped>
  #edit {
    width: 100%;
    height: 100%;
    .edit {
      :deep(.el-input__wrapper) {
        --el-input-focus-border-color: aqua;
        background-color: rgb(27, 44, 92);
        .el-input__inner {
          color: white;
          &::-webkit-input-placeholder {
            /* WebKit browsers*/
            color: rgba(aqua, 0.5);
          }
        }
      }
      :deep(.el-textarea) {
        // 一下为正常
        background-color: transparent;
        .el-textarea__inner {
          overflow: hidden;
          overflow-y: scroll;
          &::-webkit-scrollbar {
            width: 2px;
            height: 100%;
          }
          &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 2px;
            background: orange;
          }
          &::-webkit-scrollbar-track {
            /*滚动条里面轨道*/
            border-radius: 2px;
            background: rgba(blue, 0.2);
          }
          background-color: rgb(27, 44, 92);
          --el-input-focus-border-color: aqua;
          color: white;
          &::-webkit-input-placeholder {
            /* WebKit browsers*/
            color: rgba(aqua, 0.5);
          }
        }
      }
      :deep(.el-dialog) {
        width: 35%;
        --el-dialog-bg-color: rgba(255, 119, 0, 0.1);
        border-image-source: radial-gradient(
          65% 65%,
          transparent 0px,
          transparent 100%,
          orange 100%
        );
        .el-dialog__title {
          color: orange;
        }
        .el-dialog__close {
          color: orange;
        }
      }
      .pImg {
        width: 100%;
      }
      .btn {
        margin-top: 5%;
        margin-left: 75%;
        :deep(.el-button--primary) {
          margin-bottom: 5%;
          --el-button-bg-color: none;
          --el-button-border-color: rgba(aqua, 0.8);
          --el-button-hover-text-color: black;
          --el-button-hover-bg-color: rgba(aqua, 0.8);
          --el-button-hover-border-color: rgba(aqua, 0.8);
        }
      }
    }
  }
  </style>
  